<div style="margin-bottom: 10px;">
    <button id="createProductBtn" class="layui-btn layui-btn-normal">创建商品</button>
</div>

<script>
    function createProductPopup($, table, form, layer, laydate, upload) {
        // 创建商品弹窗
        $('#createProductBtn').on('click', function () {
            // 获取layui组件实例
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;
            var $ = layui.jquery;
            var upload = layui.upload;

            // 创建表单HTML
            var formHtml = `
            <form class="layui-form" style="padding: 20px;" lay-filter="productForm">
                <div class="layui-form-item">
                    <label class="layui-form-label">商品名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="name" required lay-verify="required" placeholder="请输入商品名称" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品描述</label>
                    <div class="layui-input-block">
                        <textarea name="description" required lay-verify="required" placeholder="请输入商品描述" class="layui-textarea"></textarea>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品积分</label>
                    <div class="layui-input-block">
                        <input type="number" name="points" required lay-verify="required|number" placeholder="请输入商品积分" class="layui-input" min="0">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品库存</label>
                    <div class="layui-input-block">
                        <input type="number" name="stock" required lay-verify="required|number" placeholder="请输入商品库存" class="layui-input" min="0">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">商品封面图</label>
                    <div class="layui-input-block">
                        <input type="text" name="cover_url" id="coverUrl" required lay-verify="required" placeholder="请输入商品封面图URL" class="layui-input">
                        <div style="margin-top: 10px;">
                            <img id="previewImage" style="max-width: 200px; max-height: 200px; display: none;">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">发货方式描述</label>
                    <div class="layui-input-block">
                        <textarea name="delivery_method" required lay-verify="required" placeholder="请输入发货方式描述" class="layui-textarea"></textarea>
                    </div>
                </div>
              
            </form>
            `;

            // 打开弹窗
            var index = layer.open({
                type: 1,
                title: '创建新商品',
                content: formHtml,
                area: ['600px', 'auto'],
                btn: ['提交', '取消'],
                success: function (layero) {
                    // 刷新表单渲染
                    form.render();

                    // 监听URL输入变化，实时预览图片
                    $('#coverUrl').on('input', function () {
                        var url = $(this).val().trim();
                        if (url) {
                            $('#previewImage').attr('src', url);
                            $('#previewImage').show();
                        } else {
                            $('#previewImage').hide();
                        }
                    });
                },
                yes: function (index) {
                    // 获取表单数据
                    var formData = form.val('productForm');

                    // 表单验证
                    var isError = false;
                    if (!formData.name) {
                        layer.msg('请输入商品名称', { icon: 5 });
                        isError = true;
                    } else if (!formData.description) {
                        layer.msg('请输入商品描述', { icon: 5 });
                        isError = true;
                    } else if (!formData.points || formData.points < 0) {
                        layer.msg('请输入有效的商品积分', { icon: 5 });
                        isError = true;
                    } else if (!formData.stock || formData.stock < 0) {
                        layer.msg('请输入有效的商品库存', { icon: 5 });
                        isError = true;
                    } else if (!formData.cover_url) {
                        layer.msg('请上传商品封面图', { icon: 5 });
                        isError = true;
                    } else if (!formData.delivery_method) {
                        layer.msg('请输入发货方式描述', { icon: 5 });
                        isError = true;
                    }

                    if (isError) {
                        return;
                    }

                    // 准备请求数据，确保包含所有必要字段
                    var requestData = {
                        name: formData.name,
                        description: formData.description,
                        points: formData.points,
                        stock: formData.stock,
                        cover_url: formData.cover_url,
                        delivery_method: formData.delivery_method,
                    };

                    // 发送请求创建商品
                    axios({
                        url: '/api/product/create_product/',
                        method: 'POST',
                        data: requestData,

                    }).then(res => {
                        res = res.data;
                        if (res.code === 0) {
                            layer.msg('商品创建成功', { icon: 6 });
                            layer.close(index);
                            // 刷新表格
                            table.reload('productTable');
                        } else {
                            layer.msg(res.message || '创建失败', { icon: 5 });
                        }
                    }).catch(() => {
                        layer.msg('网络错误，请重试', { icon: 5 });
                    });
                }
            });
        });

    }


</script>